<template>
  <div class="demo">
    <div class="demo-title">自定义展开/折叠图标</div>
    <div class="demo-content">
      <Tree
        v-model:expandedKeys="expandedKeys"
        v-model:selectedKeys="selectedKeys"
        show-line
        :tree-data="treeData"
      >
        <template #switcherIcon="{ switcherCls }"><DownOutlined :class="switcherCls" /></template>
      </Tree>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { DownOutlined } from '@ant-design/icons-vue';
  import Tree from '@sscd/tree';
  import type { TreeProps } from '@sscd/tree';
  const expandedKeys = ref<string[]>(['0-0-0']);
  const selectedKeys = ref<string[]>([]);
  const treeData: TreeProps['treeData'] = [
    {
      title: 'parent 1',
      key: '0-0',
      children: [
        {
          title: 'parent 1-0',
          key: '0-0-0',
          children: [
            {
              title: 'leaf',
              key: '0-0-0-0',
            },
            {
              title: 'leaf',
              key: '0-0-0-1',
            },
            {
              title: 'leaf',
              key: '0-0-0-2',
            },
          ],
        },
        {
          title: 'parent 1-1',
          key: '0-0-1',
          children: [
            {
              title: 'leaf',
              key: '0-0-1-0',
            },
          ],
        },
        {
          title: 'parent 1-2',
          key: '0-0-2',
          children: [
            {
              title: 'leaf',
              key: '0-0-2-0',
            },
            {
              title: 'leaf',
              key: '0-0-2-1',
            },
          ],
        },
      ],
    },
  ];
</script>
